import { useEffect, useRef } from "react";

interface PropsType {
  src: string;
}

const CustomImage: React.FC<PropsType> = (props) => {
  const imageRef = useRef<HTMLImageElement>(null);
  useEffect(() => {
    if (imageRef.current) {
      const intersectionObserver = new IntersectionObserver((entries) => {
        // 如果 intersectionRatio 为 0，则目标在视野外，
        // 我们不需要做任何事情。
        if (entries[0].intersectionRatio <= 0) return;

        if(imageRef.current)  {
          imageRef.current.src = props.src
          intersectionObserver.unobserve(imageRef.current)
        }
      });
      // 开始监听
      intersectionObserver.observe(imageRef.current);
    }
  }, []);
  return <img ref={imageRef}></img>;
};

export default CustomImage;
